import Taro, { Component } from '@tarojs/taro'
import {View, ScrollView, Text} from '@tarojs/components'
import { Loading, Search } from '@components'
import { connect } from '@tarojs/redux'
import * as actions from '@actions/cate'
import { getWindowHeight } from '@utils/style'
import Menu from './menu'
import List from './list'
import Banner from './banner'
import './cate.scss'

@connect(state => state.cate, { ...actions })
class Cate extends Component {
  config = {
    navigationBarTitleText: '分类'
  }

  state = {
    current: -1,
    loaded: false
  }

  componentDidMount() {
    this.props.dispatchMenu().then((res) => {
      this.setState({
        loaded: true,
        current: res.categoryList[0].id
      })
    })
  }

  handleMenu = (id) => {
    this.setState({ current: id})
  }

  render () {
    const { menu, categoryList } = this.props
    const { current } = this.state
    const currentCategory = categoryList.find(item => item.id === current) || {}
    const banner = currentCategory.focusBannerList || []
    const list = currentCategory.categoryGroupList || []
    const height = getWindowHeight()

    if (!this.state.loaded) {
      return <Loading />
    }

    return (
      <View className='cate'>
        <Search />

        <View className='cate_wrap'>
        <ScrollView
          scrollY
          className='cate__menu'
          style={{ height }}
          scroll-into-view={'b'.concat(current)}
          scroll-with-animation='true'
        >
          <Menu
            current={current}
            list={menu}
            onClick={this.handleMenu}
          />
        </ScrollView>
        {/* 通过切换元素实现重置 ScrollView 的 scrollTop */}
        {
          <ScrollView
            scrollY
            className='cate__list'
            style={{ height }}
          >

            <View className='cate__list-wrap'>
              <Banner banner={banner} />
              <List list={list} />
            </View>

          </ScrollView>
        }
        </View>
      </View>
    )
  }
}

export default Cate
